import React from 'react';
import {Icon as IconAntd} from 'antd-mobile';
import '../../assets/iconfont'; //使用iconfont.cn来创建symbol引用的iconfont。

import './index.scss';

//自定义图标的类型
const types = ['shouye', 'wode', 'weixin', 'wodeguanzhu', 'xiaoxi', 'map_rectangle', 'map_polygon', 'map_finger'];

/**
 * 图标：包含antd的图标库和iconfont.cn中定义的图标
 * 参考：http://antd-mobile.gitee.io/components/icon-cn/
 */
export default class Icon extends React.Component {
  //自定义图标的类型
  static types = types;

  static defaultProps = {
    className: '',
    size: 'md'
  };

  render() {
    let {type} = this.props;
    let isCustom = types.find((item) => item === type);
    if (isCustom) {
      return this.renderSelf();
    } else {
      return this.renderAntd();
    }
  }

  /**
   * Antd的图标
   */
  renderAntd() {
    let {className, ...other} = this.props;
    return <IconAntd className={`g-icon ${className}`} {...other} />;
  }

  /**
   * 自定义的图标
   */
  renderSelf() {
    let {type, className, size, ...other} = this.props;
    return (
      <svg className={`g-icon g-icon-common g-icon-${size} ${className}`} {...other}>
        <use xlinkHref={`#${type}`}></use>
      </svg>
    );
  }
}
